<template>
	<view class="myNews">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<tui-navigation-bar :isFixed="false" :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
					:splitLine="true" @init="initNavigation" title="我的消息" backgroundColor="#fff" color="#000">
					<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
						<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
					</view>
				</tui-navigation-bar>
				<view class="tabList">
					<tutor-tab :list="['我的回复','我的评论']" @clickSwtichTab="clickSwtichTab"
						:atciveIndex="atciveIndex"></tutor-tab>
				</view>
			</template>
			<view class="myNews_content">
				<view class="news_list" v-if="!atciveIndex">
					<news-item></news-item>
				</view>
				<view class="news_list" v-else>
					<news-item :isNickameCon="true" :isNickameBottom="false"></news-item>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import newsItem from './compontents/news_item.vue'
	import { getMsgList } from "@/http/api/index/index.js" 
	export default {
		components: {
			newsItem
		},
		data() {
			return {
				// 导航栏
				top: 0, //标题图标距离顶部距离
				marginTop: 0, // 页面内容距离顶部的距离

				// tab切换
				atciveIndex: 0, //切换笔记和收藏列表
				msgType: '1',
				dataList: []
			}
		},
		methods: {
			// 导航栏
			initNavigation(e) {
				this.top = e.top;
				this.marginTop = e.height;
			},
			back() {
				uni.navigateBack();
			},

			// tab切换
			clickSwtichTab(data) {
				this.atciveIndex = data.index;
				this.msgType = !this.atciveIndex?'1':'2';
				this.$refs.paging.reload()
			},
			
			// 获取用户消息列表
			queryList(pageNo, pageSize) {
				getMsgList({
					pageNum:pageNo,
					pageSize,
					type: this.msgType
				}).then(res => {
					if (res.code == 200) {
						 this.$refs.paging.complete(res.rows); 
					} else {
						this.$utils.toast(res.msg);
					}
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
		background-color: #f5f5f5 !important;
		
		.myNews {
			.tui-header-icon {
				width: 100%;
				position: fixed;
				top: 0;
				padding: 0 0 0 38rpx;
				display: flex;
				align-items: center;
				height: 32px;
				transform: translateZ(0);
				box-sizing: border-box;
			}
			/* tab列表 */
			.tabList {
				width: 690rpx;
				margin: 0 auto;
				margin-top: 40rpx;
				background-color: #f8f8f8;
				height: 148rpx;
			}

			.myNews_content {
				background-color: #f5f5f5;
				height: 75vh;
				width: 690rpx;
				margin: 0 auto;

				// 消息列表
				.news_list {
					z-index: 9999;
					position: relative;
					background: #fff;
					height: 100%;
					border-radius: 30rpx;
					padding: 0 40rpx;
					border: 1px solid #f5f5f5;
				}
			}
		}
	}
</style>